{{! The image sits in a frame (its link, when it has one) that holds the text on the image and, for a link, the arrow in the corner. ADR 0024. A heading, another place for the words, or another layer (ADR 0079) use .sv-image__over; a plain line at the bottom keeps its first markup. A circle badge (ADR 0118) sits after the frame, in the Badge element's markup (shapes mask the frame). }}
<figure {{@attrs}}>{{#image.url}}{{#link.url}}<a class="sv-image__frame sv-image__link" href="{{link.url}}"{{#link.newTab}} target="_blank" rel="noopener noreferrer"{{/link.newTab}}>{{/link.url}}{{^link.url}}<span class="sv-image__frame">{{/link.url}}<img class="sv-image__img wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{^overNew}}{{#overlayText}}<span class="sv-image__text sv-image__text--{{overlaySize}}"{{@edit overlayText}}>{{overlayText}}</span>{{/overlayText}}{{/overNew}}{{#overNew}}{{#overShown}}<span class="sv-image__over sv-image__over--{{overlayLook}} sv-image__over--v-{{overlayValign}} sv-image__over--h-{{overlayAlign}}{{#overDark}} sv-image__over--dark-text{{/overDark}}"{{#overTint}} style="--sv-image-tint:{{overlayColor}};--sv-image-tint-strength:{{overlayStrength}}%"{{/overTint}}>{{#overWords}}<span class="sv-image__words">{{#overlayTitle}}<span class="sv-image__title sv-image__title--{{overlayTitleSize}}"{{@edit overlayTitle}}>{{{overlayTitle}}}</span>{{/overlayTitle}}{{#overlayText}}<span class="sv-image__line sv-image__line--{{overlaySize}}"{{@edit overlayText}}>{{overlayText}}</span>{{/overlayText}}</span>{{/overWords}}</span>{{/overShown}}{{/overNew}}{{#link.url}}<span class="sv-image__arrow" aria-hidden="true"></span></a>{{/link.url}}{{^link.url}}</span>{{/link.url}}{{#badgeOn}}<span class="sv-badge sv-badge--design-circle sv-badge--look-{{badgeLook}} sv-badge--size-{{badgeSize}}{{#badgeMiddleLook}} sv-badge--middle-look-{{badgeMiddleLook}}{{/badgeMiddleLook}}{{#badgeTurn}} sv-badge--turn-{{badgeTurn}}{{/badgeTurn}} sv-image__badge sv-image__badge--{{badgeCorner}}"><span class="sv-badge__circle"><svg class="sv-badge__ring" viewBox="0 0 120 120" aria-hidden="true" focusable="false"><path id="sv-{{@id}}-ring" fill="none" d="M15 60a45 45 0 1 1 90 0a45 45 0 1 1-90 0"/>{{@ring badgeText}}</svg><span class="sv-badge__middle" aria-hidden="true">{{#badgeArrow}}<svg class="sv-badge__arrow" viewBox="0 0 24 24" focusable="false"><path d="M7 17 17 7M8 7h9v9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{{/badgeArrow}}{{#badgeIconOn}}<span class="sv-badge__icon sv-icon__glyph sv-glyph-{{badgeIcon}}"></span>{{/badgeIconOn}}{{#badgeWordsOn}}<span class="sv-badge__mid-words">{{badgeMiddleText}}</span>{{/badgeWordsOn}}</span>{{#badgeText}}<span class="sv-badge__label">{{badgeText}}{{#badgeWordsOn}} {{badgeMiddleText}}{{/badgeWordsOn}}</span>{{/badgeText}}</span></span>{{/badgeOn}}{{/image.url}}{{^image.url}}{{@placeholder image}}{{/image.url}}</figure>